<template>
  <div
    class="site-wrapper"
    :class="{ 'site-sidebar--fold': sidebarFold }"
    v-loading.fullscreen.lock="loading"
    element-loading-text="拼命加载中"
  >
    <template v-if="!loading">
      <main-navbar/>
      <main-sidebar/>
      <div class="site-content__wrapper" :style="{ 'min-height': documentClientHeight + 'px' }">
        <main-content/>
      </div>
    </template>
  </div>
</template>

<script>
import MainNavbar from './main-navbar'
import MainSidebar from './main-sidebar'
import MainContent from './main-content'
// 20190119 表格每页默认显示行数
import { getPageSize } from '@/utils'

// 导入theme：getter：
// 1. 控制sidebar
import { mapGetters } from 'vuex'

export default {
  data () {
    return {
      loading: true
    }
  },
  components: {
    MainNavbar,
    MainSidebar,
    MainContent
  },
  computed: {
    // 添加sidebar计算属性
    ...mapGetters(['sidebar']),
    documentClientHeight: {
      get () { return this.$store.state.common.documentClientHeight },
      set (val) { this.$store.commit('common/updateDocumentClientHeight', val) }
    },
    // 触发sidebar状态反转
    sidebarFold () {
      let open = !this.sidebar.opended
      return open
    },
    userId: {
      get () { return this.$store.state.user.id },
      set (val) { this.$store.commit('user/updateId', val) }
    },
    userName: {
      get () { return this.$store.state.user.name },
      set (val) { this.$store.commit('user/updateName', val) }
    },
    // 20190119 表格每页默认显示行数
    pageSize: {
      get () { return this.$store.state.common.pageSize },
      set (val) { this.$store.commit('common/updatePageSize', val) }
    },
    // 元素大小
    size () {
      return this.$store.getters.size
    }
  },
  created () {
    this.getUserInfo()
  },
  mounted () {
    /**
     * 测试
     */
    // console.log(window.screen)
    // console.log(this.getPageSize(100, 999))

    this.resetDocumentClientHeight()
  },
  methods: {
    // 重置窗口可视高度
    resetDocumentClientHeight () {
      this.documentClientHeight = document.documentElement['clientHeight']
      // 20190119 表格每页默认显示行数
      // 根据屏幕分辨率确定数据表格的默认显示行数
      // this.pageSize = getPageSize(this.$ELEMENT.size, window.screen.height)
      this.pageSize = getPageSize(this.size, window.screen.height)
      window.onresize = () => {
        this.documentClientHeight = document.documentElement['clientHeight']
        // 20190119 表格每页默认显示行数
        // 根据屏幕分辨率确定数据表格的默认显示行数
        // this.pageSize = getPageSize(this.$ELEMENT.size, window.screen.height)
        this.pageSize = getPageSize(this.size, window.screen.height)
      }
    },
    // 获取当前管理员信息
    getUserInfo () {
      this.$http({
        url: this.$http.adornUrl('/sys/user/info'),
        method: 'get',
        params: this.$http.adornParams()
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.loading = false
          this.userId = data.user.userId
          this.userName = data.user.username
        }
      })
    }
  }
}
</script>
